<template>
  <div class="shopping-cart">
   

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="container">
        <!-- 购物车表格 -->
        <div class="cart-table-section">
          <table class="cart-table">
            <thead>
              <tr>
                <th class="product-col">商品图片</th>
                <th class="name-col">商品名称</th>
                <th class="size-col">尺码</th>
                <th class="price-col">单价</th>
                <th class="quantity-col">数量</th>
                <th class="subtotal-col">小计</th>
                <th class="points-col">赠送积分</th>
                <th class="action-col">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="item in cartItems"
                :key="item.id"
                class="cart-item"
              >
                <td class="product-col">
                  <div class="product-image">
                    <img :src="item.shoeImage" :alt="item.name" />
                  </div>
                </td>
                <td class="name-col">
                  <div class="product-name">{{ item.shoeName}}</div>
                </td>
                <td class="size-col">
                  <div class="product-size">{{ item.sizeName }}</div>
                </td>
                <td class="price-col">
                  <div class="product-price">{{ item.price }}元</div>
                </td>
                <td class="quantity-col">
                  <div class="quantity-controls">
                    <el-button
                      size="small"
                      :icon="Minus"
                      @click="decreaseQuantity(item.id)"
                      :disabled="item.quantity <= 1"
                    />
                    <span class="quantity">{{ item.quantity }}</span>
                    <el-button
                      size="small"
                      :icon="Plus"
                      @click="increaseQuantity(item.id)"
                    />
                  </div>
                </td>
                <td class="subtotal-col">
                  <div class="product-subtotal">{{ item.price * item.quantity }}元</div>
                </td>
                <td class="points-col">
                  <div class="product-points">{{ item.integral* item.quantity }}</div>
                </td>
                <td class="action-col">
                  <el-button
                    type="danger"
                    size="small"
                    :icon="Delete"
                    @click="removeItem(item.id)"
                  />
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 继续购物按钮 -->
        <div class="continue-shopping">
          <el-button
            type="text"
            class="continue-btn"
            @click="continueShopping"
          >
            继续购物
          </el-button>
        </div>

        <!-- 结算区域 -->
        <div class="checkout-section">
          <div class="checkout-summary">
            <div class="summary-row">
              <span class="summary-label">可得积分:</span>
              <span class="summary-value points">{{ totalPoints }}分</span>
            </div>
            <div class="summary-row">
              <span class="summary-label">合计:</span>
              <span class="summary-value total">{{ totalAmount }}元</span>
            </div>
          </div>
          <el-button
            type="warning"
            size="large"
            class="checkout-btn"
            @click="goToCheckout"
            :disabled="cartItems.length === 0"
          >
            去结算
          </el-button>
        </div>
      </div>
    </div>

    <!-- 底部服务保障 -->
    <div class="service-section">
      <div class="container">
        <div class="service-items">
          <div class="service-item">
            <el-icon class="service-icon"><CircleCheck /></el-icon>
            <span>正品保障</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Clock /></el-icon>
            <span>7天无理由退货</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Van /></el-icon>
            <span>15天免费换货</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Coin /></el-icon>
            <span>满69元包邮</span>
          </div>
          <div class="service-item">
            <el-icon class="service-icon"><Lightning /></el-icon>
            <span>闪电发货</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer-info">
      <div class="container">
        <div class="info-text">
          <h4>品质赢得顾客信赖</h4>
          <p>
            十五年专心如一日，推动"货真价实、物美价廉、按需定制"网站的宗旨是我们的华命，通过缩减渠道成本，时间成本等综合购物成本，我们期待更多的人享用网络，获得更高的生活品质。通过提供优质平台、营销、支付、技术等全套服务，我们期盼更多的企业开拓网络市场，建立品牌。实现产业升级，我们的出现将为整个网络购物市场打造一个透明、诚信、公正、公开的交易平台，进而影响人们的购物消费习惯，推动电子市场规少化生产流通环节的说明，诚信，从而产生出一个"开放、透明、分享、责任"的商业文明。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import {
  Plus,
  Minus,
  Delete,
  CircleCheck,
  Clock,
  Van,
  Coin,
  Lightning
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { findCartMessage, deleteCartMessage } from '@/api/cart'

const router = useRouter()
const userStore = useUserStore()
onMounted(() => {
  // 初始化购物车数据
  queryPage()
})

// 购物车商品数据
const cartItems = ref([
])

//渲染页面数据
const queryPage = ()=>{
    findCartMessage(userStore.user.uid).then(res => {
      if (res.status === 200) {
        cartItems.value = res.data
      }
    })
}


// 计算属性
const totalAmount = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.price * item.quantity), 0)
})

const totalPoints = computed(() => {
  return cartItems.value.reduce((total, item) => total + (item.integral * item.quantity), 0)
})

// 方法
const increaseQuantity = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item) {
    item.quantity++
  }
}

const decreaseQuantity = (itemId) => {
  const item = cartItems.value.find(item => item.id === itemId)
  if (item && item.quantity > 1) {
    item.quantity--
  }
}

const removeItem = (itemId) => {
  deleteCartMessage(itemId).then(res => {
    if (res.status === 200) {
      //删除成功后刷新页面数据
      queryPage()
    }else{
      ElMessage.error('删除失败')
    }
  })
}

const continueShopping = () => {
  router.push({
    path:"/home"
  })
}

const goToCheckout = () => {
  router.push({
    path:"/order/submit"
  })
}
</script>

<style scoped>
.shopping-cart {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.header {
  background: linear-gradient(135deg, #ff8c00 0%, #ffa500 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.brand-name {
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.page-title {
  text-align: center;
  color: white;
}

.page-title h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.subtitle {
  margin: 0;
  font-size: 14px;
  opacity: 0.9;
}

.header-actions {
  display: flex;
  gap: 20px;
  color: white;
  font-size: 14px;
}

/* Main Content */
.main-content {
  padding: 30px 0;
}

/* Cart Table */
.cart-table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
}

.cart-table th {
  background-color: #f8f9fa;
  padding: 15px 10px;
  text-align: center;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
}

.cart-table td {
  padding: 20px 10px;
  text-align: center;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.cart-item:last-child td {
  border-bottom: none;
}

.product-image img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  background-color: #f0f0f0;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.product-size {
  font-size: 14px;
  color: #666;
}

.product-price {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.quantity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.quantity {
  font-size: 16px;
  font-weight: 500;
  min-width: 30px;
  text-align: center;
}

.product-subtotal {
  font-size: 18px;
  font-weight: bold;
  color: #e74c3c;
}

.product-points {
  font-size: 14px;
  color: #ff8c00;
}

/* Continue Shopping */
.continue-shopping {
  margin-bottom: 20px;
}

.continue-btn {
  color: #ff8c00 !important;
  font-size: 16px;
}

/* Checkout Section */
.checkout-section {
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.summary-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.summary-label {
  font-size: 16px;
  color: #333;
}

.summary-value {
  font-size: 18px;
  font-weight: 600;
}

.summary-value.points {
  color: #ff8c00;
}

.summary-value.total {
  font-size: 24px;
  color: #e74c3c;
}

.checkout-btn {
  padding: 15px 40px;
  font-size: 18px;
  font-weight: 600;
}

/* Service Section */
.service-section {
  background: #f8f9fa;
  padding: 30px 0;
  border-top: 1px solid #e0e0e0;
}

.service-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #666;
}

.service-icon {
  font-size: 24px;
  color: #ff8c00;
}

/* Footer Info */
.footer-info {
  background: white;
  padding: 40px 0;
  border-top: 1px solid #e0e0e0;
}

.info-text h4 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 18px;
}

.info-text p {
  color: #666;
  line-height: 1.8;
  font-size: 14px;
  text-align: justify;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  .cart-table-section {
    overflow-x: auto;
  }

  .cart-table {
    min-width: 800px;
  }

  .checkout-section {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .checkout-btn {
    width: 100%;
  }

  .service-items {
    flex-direction: column;
    gap: 20px;
  }
}

/* 表格列宽 */
.product-col {
  width: 100px;
}

.name-col {
  width: 200px;
}

.size-col {
  width: 80px;
}

.price-col {
  width: 100px;
}

.quantity-col {
  width: 120px;
}

.subtotal-col {
  width: 120px;
}

.points-col {
  width: 100px;
}

.action-col {
  width: 80px;
}
</style>